<template>
	<view class="tabWrap spaceBet">
		<view class="tabItem"
			v-for="(item,index) in tabNav"
			:key="index"
			@tap="goSqModNav(item.name)"
		>
			<view class="tabIcon posRel" :style="{background:item.bgCol}">
				<view class="samePar posAbso" :style="{background:item.bgCol}"></view>
				<text class="iconfont" :class="item.iconName"></text>
			</view>
			<view class="tabTxt">{{item.name}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				tabNav:[
					{name:'预约办事',iconName:'icon-Hearts',bgCol:'#FFBCB4'},
					{name:'社区概况',iconName:'icon-overview',bgCol:'#D9EEB6'},
					{name:'心理驿站',iconName:'icon-stationagent',bgCol:'#FCD681'},
					{name:'百姓论坛',iconName:'icon-forum',bgCol:'#C4A3FC'},
					{name:'周边配套',iconName:'icon-periphery',bgCol:'#C4A3FC'},
					{name:'问卷调查',iconName:'icon-questionnaire',bgCol:'#FFBCB4'},
					{name:'意见反馈',iconName:'icon-feedback',bgCol:'#FCD681'},
					{name:'生涯规划',iconName:'icon-plan',bgCol:'#D9EEB6'}
				]
			}
		},
		methods:{
			goSqModNav(name){
				this.$emit('goSqModNav',name)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tabWrap{
		flex-wrap: wrap;
		margin-bottom: 10rpx;
	}
	.tabItem{
		width: 25%;
		text-align: center;
		color: $sq-main8;
		font-size: 26rpx;
		margin-bottom: 30rpx;
		.tabIcon{
			width: 80rpx;
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 32rpx;
			margin:0 auto 5rpx;
			text-align: center;
			color: $sq-main0;
			.samePar{
				left: 0;
				top: 20rpx;
				z-index: -1;
				filter: blur(8px);
				border-radius: 32rpx;
			}
			.iconfont{
				font-size: 50rpx;
			}
		}
	}
</style>